<template>
  <!--
   查：
    1：定义接口api
    2:导入接口api
    3:调用接口api存储数据
    4：渲染数据
    5：与分页组件建立联系
   增：
    1：创建一个新增弹框组件
    2：在父组件中导入注册使用
    3：点击新增按钮打开弹窗
    4：完成新增弹窗组件的布局与表单验证
    5：定义导入与调用新增api
    6:调用完成：关闭弹框，提示，清空表单数据与验证，刷新父级列表
   改：
    1：点击编辑按钮打开新增弹框组件
    2：修改新增弹框组件内的标题（新增与编辑对应不同标题）
    3：新增弹框组件内的数据回显（注意数据要深拷贝）
    4：如果表单验证需要调整就调整好
    5：定义导入与调用编辑api(分场景调用)
    6：调用成功：关闭弹框，提示用户，重置表单数据与验证，刷新父级列表
   删除
    1:点击删除弹出确认框
    2：定义删除接口api
    3:导入与调用删除接口api(调用时在点击确认框确定后调用)
    4：调用成功：提示，刷新列表
    5：注意点：如果删除的是某一页最后一条数据时，删除了页码往前移动一页（页码>1）
    给角色分配权限
    1：创建一个分配权限弹框组件
    2：导入注册使用
    3：点击分配权限打开弹框
    4：完成弹框内布局
    5：完成分配权限内的权限数据列表展示
    6：完成权限数据回显勾选
    7：定义导入与点击确定调用分配权限api
    8:调用成功：提示，关闭弹框，每次关闭时清空已勾选权限数据
 -->

  <div class="setting">
    <el-card>
      <el-tabs>
        <el-tab-pane label="角色管理">
          <el-button type="primary" @click="addEvent">新增角色</el-button>
          <el-table :data="list" border>
            <el-table-column align="center" label="序号" width="50">
              <template v-slot="{ $index }">
                <div>
                  {{ (page.page - 1) * page.pagesize + $index + 1 }}
                </div>
              </template>
            </el-table-column>

            <el-table-column align="center" label="名称" prop="name" />
            <el-table-column align="center" label="描述" prop="description" />
            <el-table-column align="center" label="操作">
              <template v-slot="{ row }">
                <el-button
                  type="success"
                  @click="setPerEvent(row.id)"
                >分配权限</el-button>
                <el-button
                  type="primary"
                  @click="editEvent(row)"
                >编辑</el-button>
                <el-button
                  type="danger"
                  @click="delEvent(row.id)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="page">
            <!--
              layout:需要的布局功能
              total：总条数
              page-sizes:页容量选项
              page-size：默认选中页容量哪一条
              current-page：默认页码
              @size-change:页容量改变的方法回调
              @current-change:页码改变的回调方法
             -->
            <!-- {{ page }} -->
            <el-pagination
              :current-page.sync="page.page"
              :page-sizes="[1, 3, 5, 10, 100, 200, 300, 400]"
              :page-size.sync="page.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="公司信息" lazy>
          <Info />
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 新增弹框组件 -->
    <Add ref="add" @getData="getData" />
    <!-- 分配权限弹框 -->
    <SerPer ref="per" />
  </div>
</template>
<script>
import { sysRole, sysRoleDelete } from '@/api/setting'
import Add from './components/Add.vue'
import Info from './components/Info.vue'
import SerPer from './components/SerPer'
/*
  持久化：
    1：值改变了就存储到浏览器
    2：初始值读取浏览器存储
*/
export default {
  components: { Add, Info, SerPer },
  data() {
    return {
      list: [],
      page: {
        page: 1,
        pagesize: +localStorage.getItem('setting_pagesize') || 10
      },
      total: 100
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await sysRole(this.page)
      this.list = res.data.rows
      this.total = res.data.total
      console.log('角色列表', res)
    },
    // 页码改变
    handleCurrentChange() {
      this.getData()
    },
    // 页容量改变
    handleSizeChange() {
      // localStorage.setItem(key,value)
      localStorage.setItem('setting_pagesize', this.page.pagesize + '')
      // localStorage.getItem(key)
      // localStorage.removeItem(key)
      this.getData()
    },
    // 新增点击事件
    addEvent() {
      // 打开弹框
      this.$refs.add.show = true
      this.$refs.add.mode = 'add'
    },
    // 编辑点击事件
    editEvent(row) {
      // 打开弹框
      this.$refs.add.show = true
      this.$refs.add.mode = 'edit'
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
      console.log(row)
    },
    // 删除点击事件
    async delEvent(id) {
      await this.$confirm('您确定删除该项吗?', '温馨提示')
      await sysRoleDelete(id)
      this.$message.success('删除成功')
      if (this.page.page > 1 && this.list.length === 1) {
        this.page.page--
      }
      this.getData()
    },
    // 分配权限点击事件
    setPerEvent(id) {
      this.$refs.per.show = true
      this.$refs.per.getPerList()
      this.$refs.per.getRoleInfo(id)
    }
  }
}
</script>
<style lang="scss" scoped>
.setting {
  padding: 30px;
}
.page {
  padding-top: 20px;
  text-align: center;
}
</style>
